<template>
	<view class="page">
		<uni-nav-bar @clickLeft="backPrev()" statusBar="true" leftIcon="left" :leftText="brand_name" :leftWidth="200">
		</uni-nav-bar>
		<view class="tab"> 
			<view  :class="isActive == item.cate_id ? 'tab-item active': 'tab-item'" v-for="item in tabList" :key="item.cate_id" @click="tabChange(item.cate_id)">{{item.name}}</view>
		</view>
		
		<view class="list" >
			<view class="box" v-for ="(item,index) in carData" :key="index">
				<view class="title">
					<view class="empty"></view>
					<view class="text">{{item.name}}</view>
					<view class="empty"></view>
				</view>
				<view class="content-list">
					<view class="list-item" v-for="val in carData[index].list" :key="val.hid">
						<view class="left">
							<img :src="val.cover" alt="">
						</view>
						<view class="middle">
							<view class="name">{{val.name}}</view>
							<view class="price">指导价:{{val.price}}</view>
						</view>
						<view class="right">
							<button class="btn" @click.stop="jumpBasePrice(val)">询底价</button>	
						</view>
					</view>
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	import {buryReport} from '../../utils/buryReport.js'
	export default {
		data() {
			return {
				tabList: [],
				isActive: '0',
				carData: [],
				brand_hid: '',
				brand_name: '',
			}
		},
		async onLoad(options) {
			this.carData = []
			this.brand_hid = options.brand_hid
			this.brand_name = options.brand_name
			this.getTabData()
			this.getCarList()
			
		}, 
		methods: {
			backPrev() {
				uni.navigateBack({
					delta: 1
				});
			},
			tabChange(val) {
				this.isActive = val
				this.carData = []
				this.page = 1
				this.getCarList()
				uni.pageScrollTo({
				  scrollTop: 0,
				  duration: 0
				})
			},
			getTabData() {
				request.http(
				{
					url: Api.level_class,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						brand_hid: this.brand_hid
					},
					}).then(result=>{
						
						this.tabList = result.data.list
						
					})
			},
			
			getCarList () {
			
				request.http(
				{
					url: Api.cate_car,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						level_cate_id: this.isActive,
						brand_hid: this.brand_hid
					},
					}).then(result=>{
						this.carData= result.data.list
					})
			},
			
			jumpBasePrice(item) {
				console.log(item, "333")
				uni.navigateTo({
					url:"/pages/basePrice/basePrice?val=" + encodeURIComponent(JSON.stringify(item.hid))
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		.tab {
			width: 100%;
			height: 101rpx;
			background: #fff;
			display: flex;
			align-items: center;
			z-index: 99;
			overflow-y: hidden;
			overflow-x: auto;
			.tab-item {
				flex-shrink: 0;
				padding: 30rpx;
				font-weight: 400;
				color: #6E7175;
				font-size: 29rpx;
			}
			.active {
				font-size: 33rpx;
				font-weight: 600;
				color: #222526;
				position: relative;
				&::before {
					content: "";
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translate(-50%, 0);
					width: 29rpx;
					height:6rpx ;
					background-image: url(../../static/image/active.png);
					background-size: 100% 100%;
				}
			}
			
		}
		.list {
			width: 100%;
			height: 100vh;
			padding: 0 21rpx;
			box-sizing: border-box;
			.title {
				width: 100%;
				margin: 28rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.text {
					font-size: 22rpx;
					font-weight: 400;
					color: #6E7175;
					margin: 0 23rpx;
				}
				.empty {
					width: 32%;
					height: 1rpx;
					background: #DCDDE0;
				}
			}
			.content-list {
				width: 100%;
				.list-item {
					width: 707rpx;
					height: 178rpx;
					background: #FFFFFF;
					border-radius: 7rpx;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					padding: 0 15rpx;
					box-sizing: border-box;
					.left {
						height: 100%;
						display: flex;
						align-items: center;
						padding: 15rpx;
						box-sizing: border-box;
						img {
							width: 199rpx;
							height: 134rpx;
							
						}
					}
					.middle {
						height: 100%;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content:center;
						.name {
							font-size: 31rpx;
							font-weight: 500;
							color: #222526;
							margin-bottom: 18rpx;
						}
						.price {
							font-size: 22rpx;
							font-weight: 400;
							color: #6E7175;
						}
					}
					
					.right {
						.btn{
							width: 137rpx;
							height: 58rpx;
							background: #3075FE;
							border-radius: 4rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 58rpx;
						}
					}
				}
			}
		}
	}
</style>

<style>	
	button::after {
	      border: none;
	}
</style>